<template>
	<div class="inner" :class="{'inner-mobile':!os.isPc}">
        <el-container class="page-iot-container" direction="vertical">
            <iotHeader :type="type"></iotHeader>
            <el-container v-if="dataObj">
                <el-main class="iot-main">
					<h4 class="iot-title" v-if="os.isPc">设备中心
						<!-- <img class="text" src="../../assets/images/iot/text-device.png" alt=""> -->
					</h4>
                    <div class="iot-pool-top">
                        <CompanyDevice v-if="os.isPc" ref="companyDevice" :type="type" :isCompanyAndPool="isCompanyAndPool"></CompanyDevice>
						<CompanyDevicePad v-else  ref="companyDevice" :type="type" :isCompanyAndPool="isCompanyAndPool"></CompanyDevicePad>
                    </div>
                    <div class="iot-pool-bottom flex v-c" v-if="os.isPc">
                        <div class="small-blk">
                            <Today :type="type" :data="dataObj.todayAlarm"></Today>
                        </div>
                        <div class="flex-1 ml-20">
                            <Realtime ref="realtime" :type="type"></Realtime>
                        </div>
                        <div class="small-blk ml-20">
                            <Device :type="type" :data="dataObj.todayDeviceCountByState"></Device>
                        </div>
						<!-- 设备运行状态 -->
                        <!-- <div class="small-blk ml-20">
                            <Type ref="type" :type="type" :data="dataObj.todayDeviceCountByState"></Type>
                        </div> -->
                    </div>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>
<script>
import { mapState } from 'vuex'
import iotHeader from '@/components/iot/IOTHeader.vue'
import Today from '@/components/iot/Today.vue'
import Device from '@/components/iot/Device.vue'
import Type from '@/components/iot/Type.vue'
import Realtime from '@/components/iot/Realtime.vue'
import CompanyDevice from '@/components/iot/CompanyDeviceNew.vue'
import CompanyDevicePad from '@/components/iot/CompanyDevicePad.vue'
export default {
	name: 'Home',
	props: ['winH','type'],
	data () {
		return {
			dataObj: null,
			loading: false,
			os: {}
		}
	},
	watch: {
		winH (winH) {
			this.os = this.utils.getOS()
		}
	},
	components: {
		iotHeader,
		Today,
		Device,
		Type,
		Realtime,
		CompanyDevice,
		CompanyDevicePad
	},
	computed: {
		...mapState([
			'scale',
			'siteInfos','winSize'
		]),
		isCompanyAndPool () {
			return this.siteInfos.userType == 2 && this.type=='pool'
		}
	},
	methods: {
		getData () {
			// this.openFullLoading()
			let url = '/firewater/firewater/getHomePageData'
			this.$get(url,{
				nums: 5,
				type:1,
				userType: this.siteInfos.userType
			}).then(res => {
				// this.closeFullLoading()
				this.dataObj = res.data
			}, (err) =>{
				// this.closeFullLoading()
				if(err.msg){
					this.$message.error(err.msg);
				}
			})
		},
		alarmAction () {
			this.getData()
			if(this.$refs.realtime){
				this.$refs.realtime.getData()
			}
			
		}
	},
	created () {
		this.os = this.utils.getOS()
		this.getData()
	},
	activated () {
		
	},
	mounted () {
		// 
	},
}
</script>